<template>
    <n-space vertical>
        <n-space>
            <template v-for="item in items">
                <n-card size="small">
                    <n-scrollbar style="max-height: 80px">
                        <n-space vertical :style="{ width: '200px', height: '80px' }">
                            <template v-if="prop.group">
                                <n-input-group v-if="edits[item.val]">
                                    <n-input v-model:value="nowoptval" />
                                    <n-button type="primary" ghost @click="() => doSaveOpt(item)">确认</n-button>
                                </n-input-group>
                                <n-space v-else>
                                    <n-button-group size="small" v-for="opt in subs[item.val]">
                                        <n-button ghost @click="() => doEditOpt(item.val, opt.id, opt.title)">
                                            {{ opt.title }}
                                        </n-button>
                                        <n-button @click="() => doDeleteOpt(item.val, opt.id)">
                                            <template #icon>
                                                <n-icon><DeleteForeverRound /></n-icon>
                                            </template>
                                        </n-button>
                                    </n-button-group>

                                    <n-button size="small" dashed @click="() => doAddOpt(item.val)">
                                        <template #icon>
                                            <n-icon><AddRound /></n-icon>
                                        </template>
                                    </n-button>
                                </n-space>
                            </template>
                            <template v-else>
                                <n-input-group v-if="edits[item.val]">
                                    <n-input v-model:value="item.name" />
                                    <n-button
                                        type="primary"
                                        ghost
                                        @click="
                                            () => {
                                                edits[item.val] = false
                                                emit('update:vals', items)
                                            }
                                        "
                                    >
                                        确认
                                    </n-button>
                                </n-input-group>
                                <n-h3 v-else>{{ item.name }}</n-h3>
                            </template>
                        </n-space>
                    </n-scrollbar>
                    <template #action>
                        <n-space :style="{ width: '200px' }" justify="end">
                            <n-button-group size="tiny">
                                <n-button
                                    v-if="prop.sort"
                                    :disabled="item.val == items[0].val"
                                    @click="
                                        () => {
                                            doBack(item)
                                        }
                                    "
                                >
                                    <template #icon>
                                        <n-icon><KeyboardArrowLeftRound /></n-icon>
                                    </template>
                                </n-button>
                                <n-button
                                    v-if="prop.sort"
                                    :disabled="item.val == items[items.length - 1].val"
                                    @click="
                                        () => {
                                            doGoto(item)
                                        }
                                    "
                                >
                                    <template #icon>
                                        <n-icon><KeyboardArrowRightRound /></n-icon>
                                    </template>
                                </n-button>
                                <n-button
                                    v-if="!prop.group"
                                    type="info"
                                    @click="
                                        () => {
                                            edits[item.val] = true
                                        }
                                    "
                                >
                                    <template #icon>
                                        <n-icon><EditNoteRound /></n-icon>
                                    </template>
                                </n-button>
                                <n-button
                                    type="error"
                                    @click="
                                        () => {
                                            doDelete(item)
                                        }
                                    "
                                >
                                    <template #icon>
                                        <n-icon><DeleteForeverRound /></n-icon>
                                    </template>
                                </n-button>
                            </n-button-group>
                        </n-space>
                    </template>
                </n-card>
            </template>
        </n-space>
        <n-button strong secondary type="warning" @click="doAdd">
            <template #icon>
                <n-icon><AddRound /></n-icon>
            </template>
            添加
        </n-button>
    </n-space>
</template>

<script lang="ts" setup>
import { ref, onBeforeMount, PropType } from 'vue'
import { KeyboardArrowLeftRound, KeyboardArrowRightRound, EditNoteRound, DeleteForeverRound, AddRound } from '@vicons/material'
import { nanoid } from 'nanoid'

const { $dialog: dialog } = window

const prop = defineProps({
    vals: {
        type: Array as PropType<any[]>,
        default: [],
    },
    group: {
        type: Boolean,
        default: false,
    },
    sort: {
        type: Boolean,
        default: false,
    },
})

const items = ref<any[]>([])

const subs = ref<any>({})

const emit = defineEmits(['update:vals'])

const edits = ref<any>({})

const nowoptid = ref<string>('')
const nowoptval = ref<string>('')

const doAddOpt = (itemId: any) => {
    let id = nanoid(5)
    console.log(subs.value[itemId])
    console.log(subs.value[itemId].length)
    subs.value[itemId][subs.value[itemId].length] = {
        id: id,
        title: '',
    }
    edits.value[itemId] = true
    nowoptid.value = id
    nowoptval.value = ''
}

const doDeleteOpt = (itemId: string, optId: string) => {
    subs.value[itemId] = subs.value[itemId].filter((s: any) => s.id != optId)
    items.value.find((i: any) => i.val == itemId).name = JSON.stringify(subs.value[itemId])
    emit('update:vals', items)
}

const doEditOpt = (itemId: string, optId: string, value: string) => {
    edits.value[itemId] = true
    nowoptid.value = optId
    nowoptval.value = value
}

const doSaveOpt = (item: any) => {
    subs.value[item.val].find((s: any) => s.id == nowoptid.value).title = nowoptval.value
    items.value.find((i: any) => i.val == item.val).name = JSON.stringify(subs.value[item.val])
    nowoptid.value = ''
    nowoptval.value = ''
    edits.value[item.val] = false
    emit('update:vals', items)
}

const doBack = (item: any) => {
    let index: number = items.value.findIndex((i: any) => i.val == item.val)
    let old: any = items.value[index - 1]
    items.value[index - 1] = item
    items.value[index] = old

    emit('update:vals', items.value)
}
const doGoto = (item: any) => {
    let index: number = items.value.findIndex((i: any) => i.val == item.val)
    let old: any = items.value[index + 1]
    items.value[index + 1] = item
    items.value[index] = old

    emit('update:vals', items.value)
}

const doDelete = (item: any) => {
    dialog.error({
        title: '提示',
        content: `是否删除字典值？`,
        positiveText: '确定',
        negativeText: '取消',
        onPositiveClick: () => {
            items.value = items.value.filter((i: any) => {
                return i.val != item.val
            })
            emit('update:vals', items.value)
        },
    })
}

const doAdd = () => {
    let id = nanoid(5)
    items.value[items.value.length] = {
        val: id,
        name: prop.group ? '[]' : '',
        sort: 0,
    }
    if (!prop.group) {
        edits.value[id] = true
    } else {
        subs.value[id] = []
    }
}

onBeforeMount(() => {
    items.value = prop.vals
    if (prop.group) {
        prop.vals.forEach((val: any) => {
            subs.value[val.val] = JSON.parse(val.name || '[]')
        })
    }
})
</script>
